<style lang="scss" scoped>
  .table-outline {
    background-color: #ffffff;
    padding: 5px 10px;
  }
  .pda-table{
    //兼容pda
    max-height: 80vh;
    overflow: auto;
  }
</style>
<template>
  <div class="table-outline" :class="G_IsMobile?'pda-table':''" v-if="show">
    <table-search
        :show="config.search"
        :queryFormItem="queryFormItem"
        :collapseFormItem="collapseFormItem"
        :data="filter"
        @handleSearch="handleSearch"
        @handleReset="handleReset"
    ></table-search>
    <table-expand-tools
        :tableSize="tableSize"
        :tableFullscreen="tableFullscreen"
        :columns="columns"
        :selection="selection"
        :pageAdditionalAction="pageAdditionalAction"
        :config="{
          addButton:config.addButton,
          batchDeleteButton:config.batchDeleteButton,
          pageAdditionalAction:config.pageAdditionalAction,
          downloadIcon:config.downloadIcon,
          uploadIcon:config.uploadIcon,
          uploadUrl:config.uploadUrl,
          tableSizeIcon:config.tableSizeIcon,
          fullscreenIcon:config.fullscreenIcon,
          refreshIcon:config.refreshIcon,
          columnSettingIcon:config.columnSettingIcon
        }"
        @handleChangeTableSize="handleChangeTableSize"
        @handleFullscreen="handleFullscreen"
        @handleRefresh="handleRefresh"
        @handleCreate="handleCreate"
        @handleDeleteMultiple="handleDeleteMultiple"
        @handleDownload="handleDownload"
        @handleUpload="handleUpload"
        @changeColumnShow="changeColumnShow"
    ></table-expand-tools>
    <table-expand-basic
        ref="table"
        :size="tableSize"
        :loading="loading"
        :data="data"
        :columns="columns"
        :action="action"
        :additionalAction="additionalAction"
        :btnShowFun="btnShowFun"
        :config="{
          action:config.action,
          additionalAction:config.additionalAction,
          showCheck:config.showCheck,
          highlightRow:config.highlightRow,
        }"
        @handleClick="handleClick"
        @handleDbClick="handleDbClick"
        @handleSortChange="handleSortChange"
        @handleSelect="handleSelect"
        @handleSelectCancel="handleSelectCancel"
        @handleSelectAll="handleSelectAll"
        @handleClearSelect="handleClearSelect"
        @handleEdit="handleEdit"
        @handleDelete="handleDelete"
        @handleDetail="handleDetail"
    ></table-expand-basic>
    <table-navigation
        v-if="!config.hidePage"
        :pageSizeOpts="pageSizeOpts"
        :pageNavigation="pageNavigation"
        @handleChangePage="handleChangePage"
        @handleChangePageSize="handleChangePageSize"
    ></table-navigation>
    <slot></slot>
  </div>
</template>

<script>
    import TableBasic from 'public/components/table/parts/table-basic';
    import TableNavigation from 'public/components/table/parts/table-navigation';
    import TableExpandTools from './tableExpandTools';
    import TableExpandBasic from './tableExpandBasic';
    import TableSearch from 'public/components/table/parts/table-search';
    export default {
        name: 'table-expand',
        components: { TableSearch, TableExpandTools, TableBasic, TableNavigation, TableExpandBasic },
        data () {
            return {
                show: true,
                tableSize: 'default',
                tableFullscreen: false,
                selection: [],
                filter: {
                    
                },
                modelData: {},
                drawer: {
                    default: () => {
                        return {
                            show: false,
                            type: 'read' // edit || read || new
                        };
                    }
                }
            }
        },
        props: {
            config: {
                default: () => {
                    return {
                        /* search:true,
          addButton:true,
          batchDeleteButton:true,
          downloadIcon:true,
          uploadIcon:true,
          uploadUrl:'/',
          tableSizeIcon:true,
          fullscreenIcon:true,
          refreshIcon:true,
          columnSettingIcon:true,
          action:true,
          additionalAction:true */
                    }
                }
            },
            loading: {
                default: () => {
                    return false
                }
            },
            orderBy: {
                default: () => {
                    return {}
                }
            },
            data: {
                default: () => {
                    return [
                        {
                            type: 'abc',
                            className: 'abc',
                            version: 'abc',
                            published: 'abc',
                            createTime: 'abc',
                            updateTime: 'abc'
                        },
                        {
                            type: 'abc',
                            className: 'abc',
                            version: 'abc',
                            published: 'abc',
                            createTime: 'abc',
                            updateTime: 'abc'
                        }
                    ]
                }
            },
            columns: {
                default: () => {
                    return [
                        /* {
            key: 'type',
            title: '所属类型',
            minWidth: 100,
            align: 'center',
            show: true
          },
          {
            key: 'className',
            title: '模型类名',
            minWidth: 100,
            align: 'center',
            show: true
          },
          {
            key: 'version',
            title: '版本号',
            minWidth: 100,
            align: 'center',
            show: true,
          },
          {
            key: 'published',
            title: '是否发布',
            minWidth: 100,
            align: 'center',
            show: true
          },
          {
            key: 'createTime',
            title: '创建时间',
            minWidth: 60,
            align: 'center',
            show: true,
          },
          {
            key: 'updateTime',
            title: '更新时间',
            minWidth: 100,
            align: 'center',
            show: true,
          }, */
                    ]
                }
            },
            action: {
                default: () => {
                    return {
                        edit: true,
                        delete: true,
                        detail: true
                    }
                }
            },
            additionalAction: {
                default: () => {
                    return {
                        /* key: 'additionalAction',
          title: 'additionalAction',
          slot: 'additionalAction',
          width: 200,
          fixed:'right',
          align: 'center',
          show: true,
          buttons:[
              {title: 'abc',color:'red', event: (row, index) => console.log(row)},
              {title: 'abc2', event: (row, index) => console.log(row)}
              ] */
                    }
                }
            },
            pageAdditionalAction: {
                default: () => {
                    return {

                    }
                }
            },
            pageSizeOpts: {
                default: () => {
                    return [10, 30, 50, 100];
                }
            },
            pageNavigation: {
                default: () => {
                    return { total: 0, pageSize: 10, pageNumber: 1 };
                }
            },
            queryFormItem: {
                default: () => {
                    return [
                        /* {title:'abc1',key:'abc1',config:{type:'preText',prepend:'abc_'}},
            {title:'abc2',key:'abc2',config:{type:'text'}},
            {title:'abc3',key:'abc3',config:{type:'text'}},
            {title:'abc4',key:'abc4',config:{type:'text'}},
            {title:'abc5',key:'abc5',config:{type:'text'}},
            {title:'abc6',key:'abc6',config:{type:'text'}},
            {title:'abc7',key:'abc7',config:{type:'text'}},
            {title:'abc',key:'any',config:{type:'select'}}, */
                    ];
                }
            },
            collapseFormItem: {
                default: () => {
                    return [
                        /* {title:'abc1',key:'any1',config:{type:'select'}},
          {title:'abc2',key:'any1',config:{type:'select'}}, */
                    ];
                }
            },
            btnShowFun:{
              default:()=>{
                return function(){
                  return true
                }
              }
            },
        },
        methods: {
            handleChangePage (page) {
                this.pageNavigation.pageNumber = page;
                this.$emit('loadPage', this.pageNavigation, this.filter, this.orderBy);
            },
            // 切换每页条数
            handleChangePageSize (size) {
                this.pageNavigation.pageNumber = 1;
                this.pageNavigation.pageSize = size;
                this.$emit('loadPage', this.pageNavigation, this.filter, this.orderBy);
            },
            handleEdit (row, index) {
                this.$emit('handleEdit', row, index)
            },
            handleDelete (row, index) {
                this.$emit('handleDelete', row, index)
            },
            handleDetail (row, index) {
                this.$emit('handleDetail', row, index)
            },
            handleClick (row, index) {
                this.$emit('handleClick',row,index)
            },
            handleDbClick(row,index){
              this.$emit('handleDbClick',row,index)
            },
            handleSortChange (column, key, order) {

            },
            handleSelect (selection, row) {
                this.selection = selection;
                this.$emit('getSelection',selection)
            },
            handleSelectCancel (selection, row) {
                this.selection = selection;
                this.$emit('getSelection',selection)
            },
            handleSelectAll (selection) {
                this.selection = selection;
                this.$emit('getSelection',selection)
            },
            handleClearSelect (selection) {
                this.selection = selection;
                this.$emit('getSelection',selection)
            },

            handleChangeTableSize (size) {
                this.tableSize = size;
            },
            // 表格全屏
            handleFullscreen () {
                this.tableFullscreen = this.G_Fullscreen(this.tableFullscreen, this.$el)
            },
            handleRefresh () {
                this.show = false;
                this.$nextTick(() => {
                    this.show = true;
                })
            },
            handleDownload () {
                // this.$refs.table.download();
                this.G_Export('The original data', this.columns.filter(item => item.show === true), this.data)
            },
            handleUpload (file) {
                this.G_Upload(file, (res) => {
                    this.data = res.data;
                })
            },
            handleCreate () {
                this.$emit('handleCreate');
            },
            handleDeleteMultiple () {
                this.$emit('handleDeleteMultiple', this.selection)
            },
            handleSearch () {
                // console.log(this.filter)
                this.$emit('handleSearch', this.filter);
            },
            handleReset () {
                this.filter = {};
                this.$emit('handleReset');
            },
            changeColumnShow(index){
                this.columns[index].show = !this.columns[index].show
                //解决列设置中显隐字段不好使
                this.$refs.table.setFinalColumn()
            }
        }
    }
</script>
